<template>
  <div class="section soft-gradent">
    <div class="home-container wide">
      <div class="w-layout-grid w-container integrate-grid">
        <!--左上角第一个卡片-->
        <div class="integrate-card card1">
          <!--标题-->
          <div class="integrate-title">Image and Video Databases</div>
          <div class="pill-container">
            <!--图片容器div，包含图片和文字，左右布局-->
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/aws-logo.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">AWS S3</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/kubernetes_logo.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">Kubernetes</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/azure_logo.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">Azure</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/google_cloud-icon.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">Google Cloud</div>
              </div>
            </div>
          </div>
          <div class="connect-horiz-top"></div>
        </div>
        <!--上方横向线条-->
        <div
          id="w-node-f8028a14-5f61-27d4-1503-e0d770caff42-cf86da6e"
          class="connect-horiz"
        ></div>
        <!--右上角卡片-->
        <div class="integrate-card card2">
          <div class="integrate-title">Annotation Formats</div>
          <div class="pill-container">
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/Arch_Amazon-Rekognition_64.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">Amazon Rekognition</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/labelbox_logo.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">LabelBox</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/CVAT_icon.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">CVAT</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/Arch_Amazon-SageMaker-Ground-Truth_16.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">SageMaker Ground Truth</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/labelme-icon.png"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">LabelMe</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/create-ml_icon.png"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">CreateML</div>
              </div>
            </div>
          </div>
        </div>
        <!--中间内容-->
        <div class="integrate-header">
          <div>
            <div class="connect-vert-mid-top"></div>
            <!--图片-->
            <div class="integrate-rf-icon">
              <img
                src="../assets/images/roboflow_logomark_flat_round.svg"
                loading="lazy"
                id="w-node-f8028a14-5f61-27d4-1503-e0d770cafee6-cf86da6e"
                alt="Roboflow icon"
              />
            </div>
            <div class="connect-vert-mid-bot"></div>
          </div>
          <!--文字描述-->
          <div>
            <!--标题内容-->
            <h2 class="dark narrower int-section">
              Integrate into any part of your pipeline
            </h2>
            <div class="rf-subhead int-subhead">
              With open APIs, SDKs, integrated developer tools, and rich
              documentation, you can customize, automate, and extend your
              pipeline to other applications.
            </div>
          </div>
        </div>
        <!--左下角卡片-->
        <div
          id="w-node-f8028a14-5f61-27d4-1503-e0d770cafeed-cf86da6e"
          class="integrate-card card3"
        >
          <div class="integrate-title">
            Inference And Deployment Environments
          </div>
          <div class="pill-container">
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/nvidia_logo.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">NVIDIA Jetson</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/RaspberryPi_logo.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">Raspberry Pi</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/Arch_Amazon-SageMaker_16.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">SageMaker</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/azure_logo.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">Azure</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/nvidia_logo.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">NVIDIA&nbsp;TRT</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/kubernetes_logo.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">Kubernetes</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/luxonis_logo_symbol.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">Luxonis OAK</div>
              </div>
            </div>
          </div>
        </div>
        <!--下方横向线条-->
        <div
          id="w-node-f8028a14-5f61-27d4-1503-e0d770caff14-cf86da6e"
          class="connect-horiz"
        ></div>
        <!--右下角卡片-->
        <div
          id="w-node-f8028a14-5f61-27d4-1503-e0d770caff15-cf86da6e"
          class="integrate-card card4"
        >
          <div class="integrate-title">Training Frameworks</div>
          <div class="pill-container">
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/google-tensorflow-icon.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">TensorFlow</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/PyTorch_logo_icon.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">PyTorch</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/yolo_logo_icon_249127.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">YOLO</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/azure_logo.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">Azure Vision Training</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/GoogleColab_logo.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">Google Colab</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/Keras_logo.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">Keras</div>
              </div>
            </div>
            <div class="integrate-pill">
              <div class="pill-contents">
                <img
                  src="../assets/images/hf_logo.svg"
                  loading="lazy"
                  alt=""
                  class="integrate-logo"
                />
                <div class="integrate-name">Hugging Face</div>
              </div>
            </div>
          </div>
          <div class="connect-horiz-bottom"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SectionFour",
  data() {
    return {};
  },
  components: {},
  methods: {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.section {
  display: grid;
  background-image: linear-gradient(#fff, rgba(255, 255, 255, 0) 10%),
    url("../assets/images/soft-gradient-bg.webp");
  background-position: 0 0, 0 0, 50%;
  background-repeat: repeat, repeat;
  background-size: auto, auto;
  padding-top: 30px;
  padding-bottom: 30px;
  .wide {
    max-width: 1404px;
    margin: 0 auto;
  }
  .home-container {
    .integrate-grid {
      width: 100%;
      grid-column-gap: 0px;
      grid-row-gap: 0px;
      transform-style: preserve-3d;
      grid-template-rows: 186px 300px 186px;
      grid-template-columns: minmax(452px, 468fr) minmax(100px, 468px) minmax(
          452px,
          468fr
        );
      align-items: center;
      margin-top: 80px;
      margin-bottom: 150px;
      /*卡片*/
      .card1 {
        width: 360px;
        height: 148px;
        margin-right: 0;
        grid-area: 1/1/2/2;
        margin-left: auto;
      }
      .card2 {
        width: 410px;
        height: 186px;
        grid-area: 1/3/2/4;
        margin-right: auto;
      }
      .integrate-card {
        background-image: linear-gradient(
          rgba(255, 255, 255, 0.9),
          rgba(255, 255, 255, 0.1)
        );
        border: 1px solid #9ca3af;
        border-radius: 4px;
        padding: 10px 16px;
        position: relative;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        .integrate-title {
          text-align: center;
          text-transform: uppercase;
          margin-bottom: 12px;
          font-family: Ubuntu Mono, sans-serif;
          font-size: 14px;
        }
        .pill-container {
          flex-wrap: wrap;
          justify-content: center;
          display: flex;
          .integrate-pill {
            background-color: #fff;
            border-radius: 20px;
            margin: 6px;
            padding: 4px 18px 4px 12px;
            font-size: 12px;
            display: inline-block;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
            .pill-contents {
              align-items: center;
              display: flex;
              .integrate-logo {
                width: 20px;
                height: 20px;
                object-fit: contain;
                border-radius: 4px;
                margin-right: 10px;
              }
              .integrate-name {
                font-size: 14px;
              }
            }
          }
        }
      }
      /*中间内容*/
      .integrate-header {
        min-height: 486px;
        flex-direction: row;
        align-items: center;
        padding-left: 30px;
        padding-right: 30px;
        display: flex;
        position: relative;
        grid-area: 2/2/3/4;
        .connect-vert-mid-top {
          width: 1px;
          height: 193px;
          background-color: #6b7280;
          background-image: linear-gradient(#6b7280, #a351fb);
          position: relative;
          left: auto;
        }
        .connect-vert-mid-bot {
          width: 1px;
          height: 193px;
          background-color: #374151;
          background-image: linear-gradient(#a351fb, #6b7280);
          position: relative;
          left: auto;
        }
        /*右侧文字*/

        h2 {
          color: #111827;
          margin-top: 24px;
          margin-bottom: 16px;
          font-size: 40px;
          font-weight: 700;
          line-height: 1.2;
          position: static;
        }
        .dark.narrower,
        .int-section {
          margin-top: 0;
        }
        .dark.narrower {
          max-width: 450px;
        }
        .dark {
          color: #1f2937;
        }
        .integrate-rf-icon {
          width: 100px;
          background-image: linear-gradient(
            rgba(249, 250, 251, 0.9),
            rgba(255, 255, 255, 0) 60%
          );
          border: 1px solid #a351fb;
          border-radius: 10px;
          padding: 8px;
          position: relative;
          left: -50px;
          top: -10px;
          img {
            max-width: 100%;
            vertical-align: middle;
            display: inline-block;
          }
        }
        .rf-subhead {
          text-align: left;
          margin-top: 0;
          margin-bottom: 20px;
          font-size: 18px;
          font-weight: 400;
          line-height: 2;
        }
      }
      /*底部卡片*/
      .card3 {
        grid-area: 3/1/4/2;
        width: 452px;
        margin-right: 0;
        padding-left: 8px;
        padding-right: 8px;
        margin-left: auto;
      }
      .card4 {
        grid-area: 3/3/4/4;
        width: 450px;
        margin-right: auto;
        margin-left: 0;
      }
      /*线*/
      .connect-horiz {
        height: 1px;
        background-color: #6b7280;
        background-image: none;
      }
      #w-node-f8028a14-5f61-27d4-1503-e0d770caff14-cf86da6e {
        grid-area: 3/2/4/3;
      }
      #w-node-f8028a14-5f61-27d4-1503-e0d770caff42-cf86da6e {
        grid-area: 1/2/1/3;
      }
    }
  }
  .w-layout-grid {
    grid-row-gap: 16px;
    grid-column-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .w-container {
    margin-left: auto;
    margin-right: auto;
  }
  /*使用伪类元素实现左上，右下竖线*/
  .w-container:before,
  .w-container:after {
    position: absolute;
    width: 1px;
    height: 100px;
    content: "";
    z-index: 999;
    grid-area: 1/1/2/2;
    display: table;
    background: linear-gradient(to top, #999999, white);
  }
  .w-container:before {
    top: -43%;
    left: 46%;
    background: linear-gradient(to top, #999999, white);
  }
  .w-container:after {
    bottom: -329%;
    right: -148%;
    height: 130px;
    background: linear-gradient(to top #999999, white);
  }
}
/*覆盖背景图片*/
.soft-gradent {
  background-image: linear-gradient(#fff, rgba(255, 255, 255, 0) 10%),
    linear-gradient(45deg, #fff 8%, rgba(255, 255, 255, 0) 43%),
    url("../assets/images/image (5).svg"),
    url("../assets/images/soft-gradient-bg.webp");
  background-position: 0 0, 0 0, 50% 100%, 50% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  background-size: auto, auto, 100%, 100% 80%;
}
</style>
